<template>
  <div id="Home">
    <div class="box">
         <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id">
        <img :src="item.picUrl" alt="">
      </van-swipe-item>
    
    </van-swipe>
    <div class="box1">
      <ul>
        <li @click="qian">
          <p ><img src="../assets/imgs/1.png" alt=""></p>
          <p>签到</p>
        </li>
        <li @click="lingjuan">
           <p><img src="../assets/imgs/2.png" alt=""></p>
           <p>领劵</p>
        </li>
        <li @click="kanjia">
           <p><img src="../assets/imgs/3.png" alt=""></p>
           <p>砍价</p>
        </li>
        <li @click="yanxuan">
           <p><img src="../assets/imgs/4.png" alt=""></p>
           <p>专栏</p>
        </li>
      </ul>
    </div>
    </div>
    <div class="box2">
      <p>
           <span class="q1" @click="quanmin">全民砍价 <span class="q2">&gt;</span></span>
      </p>
     
    </div>
    <div class="box3">
     <ul>
       <li v-for="(item,index) in kan" :key="index" v-show="index>2" class="aa"  @click="tiao">
         <span>
           <img :src="item.pic" alt="">
         </span>
         
        <div>
            <p>{{item.name}}</p>
            <span>{{item.characteristic}}</span>
            <ol class="qwe">
              <li class="cc">
                ￥{{item.minPrice}}
                 
              </li>
              <li>
                ￥{{item.originalPrice}}
              
              </li>
              <li>{{item.stores}}件</li>
            </ol>
             <ol>
             <li>低价</li>
             <li>原价</li>
             <li>限量</li>
            </ol>
        </div>
       </li>
     </ul>
    </div>
   <jingxuan></jingxuan>
   <renqi></renqi>
  </div>
</template>

<script>
import{getlun,getshop} from '../utils/api'
import '../assets/imgs/1.png'
import jingxuan from '@/components/jingxuan'
import renqi from '@/components/renqi'
export default {
  components:{
     jingxuan,
      renqi
  },
  name: "",
  data() {
    return {
      list:[],
      kan:[],
      show:false
    };
  },
  created() {
    getlun().then(res=>{
      this.list=res
    })
    getshop().then(res=>{
    
     this.kan=Object.values(res)
    
    })
  },
  methods: {
    yanxuan(){
        
       this.$router.push('/yanxuanzhuanlan')    

    },
   
    // 砍价详情
    kanjia(){
    
    this.$router.push('/kanjialiebiao')
    },



    // 跳转全民砍价
    quanmin(){
        this.$router.push('/kanjialiebiao')
    },
      qian(){
       this.$router.push('/qian')
      },
      lingjuan(){
         this.$router.push('/lingjuan')
      },
       tiao(){
        this.$router.push('/kanjialiebiao')
        
      }
  },
};
</script>

<style scoped lang='scss'>
.box{
  width: 100%;
  height: 360px;
  background-color: #F5F5F5;
  position: relative;
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 300px;
    text-align: center;
    background-color: white;
    img{
      height: 300px;
      width: 100%;
    }
  }
.box1{
  width: 100%;
  height: 110px;
  background-color: white;
  position: absolute;
  bottom: 20px;
 border-top-left-radius: 20%;
 border-top-right-radius: 20%;
 ul{
   width: 100%;
   display: flex;
  justify-content: space-around;
   li{
     flex: 1;
     text-align: center;
     margin-top: 20px;
     font-size: 18px;
     img{
       width: 50px;
       height: 50px;
       margin-bottom: 5px;
     }
   }
 }
}
}
 .box2{
   width: 100%;
   height: 50px;
   background-color: white;
   border-bottom: 1px solid #cccc;
   line-height: 50px;
   text-align: center;
   
   p{
     .q1{
       font-size: 18px;
     }
     .q2{
     margin-left: 10px;
      font-size: 19px;
     margin-top: 10px;
   }
    
   }
 
   
 }
 .box3{
   width: 100%;
   height: 250px;
   background-color: #F5F5F5;
   ul{
     width: 100%;
     height: 240px;
     background-color: white;
     .aa{
       width: 100%;
       height: 120px;
       display: flex;
        justify-content: space-around;
      border-bottom: 1px solid #cccc;
         
        span{
            width: 32%;
         height: 100%;
          img{
           margin-top: 8px;
            width: 100%;
            height: 88%;  
         
       }
        }
      
       div{
         width: 60%;
          p{
              margin-top: 8px;
            font-size: 15px;
            margin-bottom: 15px;
          }
          span{
            font-size: 12px;
            color: #B2B2B2;
           
          }
          ol{
            width: 100%;
           
           
           
            li{
              width: 60px;
              height: 20px;
              float: left;
              //  background-color: red;
               margin-right: 10px;
               text-align: center;
               line-height: 20px;
               font-size: 14px;
             
                
              
            }
          }
       }
     }
   }
 }
 .qwe{
   margin-top: 17px;
    .cc{
                 color: red;
                 font-size: 14px;
                 font-weight: 700;
               }
 }
 .box4{
   width: 100%;
   height: 400px;
 }
</style>